<template>
	<view style="background-color: white;">
		<uni-search-bar class="search" placeholder="剃须刀" />
		<view v-if="categories.length" style="display: flex;background-color: #f2f2f2;">
			<scroll-view scroll-y="true" class="left_scroll" style="">
				<view v-for="(item, index) in categories" :key="index" class="cateItems" @click="clickItem(index)" :class="{ cur_item: curItem == index }">{{ item.name }}</view>
			</scroll-view>
			<scroll-view scroll-y="true" class="right_scroll">
				<uni-list class="my_list">
					<uni-list-item><view slot="header" class="area_tit">商品列表</view></uni-list-item>
					<uni-list-item v-for="(item, index) in curList" :key="index">
						<!-- 自定义 header -->
						<view slot="header" class="item_header"><image :src="item.product.pic" mode="widthFix" class="list_img" lazy-load="true"></image></view>
						<!-- 自定义 body -->
						<view slot="body" class="item_body">
							<view class="item_name">{{ item.product.name }}</view>
							<view class="item_desc">
								{{item.product.subTitle}}
							</view>
							<view class="buy_area">
								<view class="item_price">
									¥{{item.product.price.toFixed(2)}}
								</view>
								<span class="add_btn" @click="add(item.product)">+</span>
							</view>
						</view>
					</uni-list-item>
				</uni-list>
			</scroll-view>
		</view>
		<!-- 详情页数据存在list_ghd.json -->
	</view>
</template>

<script>
	import {mapMutations,mapState} from 'vuex'
export default {
	data() {
		return {
			categories: [],
			curItem: 0,
			curList: [],
		};
	},
	methods: {
		// 原无vuex写法
		// clickIcon(index){
		// 	let {pickedList,curList,ifExistItem}=this
		// 	let curItem=curList[index].product
		// 	if(ifExistItem(curItem.id)){
		// 		console.log('Item existed');
		// 	}else{
		// 		pickedList.push(curItem)
		// 	}
		// 	console.log(pickedList);
		// 	if(this.pickedList.length){
		// 		uni.setTabBarBadge({
		// 		index:2,
		// 		text:pickedList.length.toString()
		// 	})
		// 	}
			
		// },
		// ifExistItem(id){
		// 	let {pickedList}=this
		// 	let judge=false
		// 	pickedList.forEach((item,index)=>{
		// 		if(item.id==id){
		// 			console.log('do exists');
		// 			item.num=item.num+1
		// 			judge=true
		// 		}
		// 	})
		// 	return judge
		// },
		...mapMutations(['add','minus']),
		// 点击不同分类获取不同数据
		clickItem(index) {
			this.curItem = index;
			this.getList();
		},
		getCate() {
			// #ifdef H5
			// 线下调试用url
			let url=`/api/data/flyco/cateList.json`
			// 服务器线上部署不需要跨域处理
			// let url=`/data/flyco/cateList.json`
			// #endif
			// #ifndef H5
			let url=`http://www.sword9991.cn/data/flyco/cateList.json`
			// #endif
			uni.request({
				url,
				method: 'GET',
				data: {},
				success: res => {
					console.log(res);
					this.categories = res.data.data;
				},
				fail: () => {},
				complete: () => {}
			});
		},
		getList() {
			// #ifdef H5
			// 线下调试专用
			let url=`/api/data/flyco/list_${this.curItem}.json`
			// 服务器部署专用
			// let url=`/data/flyco/list_${this.curItem}.json`
			// #endif
			// #ifndef H5
			let url=`http://www.sword9991.cn/data/flyco/list_${this.curItem}.json`
			// #endif
			uni.request({
				url,
				method: 'GET',
				data: {},
				success: res => {
					console.log(res);
					res.data.data.list.forEach((item)=>{
						item.product.num=1
						item.product.checked=true
					})
					this.curList = res.data.data.list;
				},
				fail: () => {},
				complete: () => {}
			});
		}
	},
	onLoad() {
		this.getCate();
		this.getList();
	},
	computed:{
		...mapState(['allList','checkedList'])
	}
};
</script>

<style lang="scss" scoped>
.search {
	// width: 100%;
}
.left_scroll {
	font-size: 30rpx;
	width: 250rpx;
	height: 87vh;
	background-color: white;
	margin-right: 10rpx;
	.cateItems {
		margin: 24px 0 20px 10px;
		padding: 6px;
		border-left: 3px solid transparent;
	}
	.cur_item {
		color: #00afec;
		border-left: 3px solid #00afec;
	}
}
.right_scroll {
	height: 87vh;
	width: 490rpx;
	margin-top: 10rpx;
	border-radius: 6px;
}
.my_list {
	font-size: 20rpx;
	border-radius: 6px !important;
	.area_tit {
		width: 100%;
	}
	.list_img {
		width: 6em;
		height: 6em;
	}
	.item_body {
		width: 270rpx;
		padding-left:20rpx;
		.buy_area{
			width: 88%;
			display: flex;
			margin-top: 16rpx;
			align-items: center;
			justify-content: space-between;
		}
		.item_price{
			color: #de3e26;
			font-weight: bold;
			line-height: 36rpx;
		}
		.add_btn{
			display: block;
			color: white;
			text-align: center;
			font-size: 60rpx;
			margin-left: 40rpx;
			background-color: #00afec;
			height: 60rpx !important;
			width: 60rpx !important;
			border-radius: 8rpx;
		}
	}
	.item_name {
		width: 94%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-bottom: 4rpx;
	}
	.item_desc{
		font-size: 20rpx;
		color: #757575;
		width: 80%;
		height: 80rpx;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}
</style>
